<template>
  <div>
    <el-card>
      <el-table border :data="permission" row-key="id">
        <el-table-column
          label="名称"
          align="center"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="权限值"
          align="center"
          prop="code"
        ></el-table-column>
        <el-table-column
          label="修改时间"
          align="center"
          prop="updateTime"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              :disabled="row.level == 4 ? true : false"
              @click="addMenu(row)"
            >
              {{ row.level == 3 ? '添加功能' : '添加菜单' }}
            </el-button>
            <el-button
              type="primary"
              size="small"
              :disabled="row.level == 1 ? true : false"
              @click="edit(row)"
            >
              编辑
            </el-button>
            <!--    -->
            <el-popconfirm
              :title="`确定删除${row.name}吗?`"
              @confirm="deleteMenu(row)"
            >
              <template #reference>
                <el-button
                  type="primary"
                  size="small"
                  :disabled="row.level == 1 ? true : false"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="dialog">
      <template #header>
        <span class="unselectable">{{ menuId ? '编辑菜单' : '添加菜单' }}</span>
      </template>
      <template #default>
        <el-form>
          <el-form-item label="菜单名称">
            <el-input
              style="width: 240px"
              v-model="menuObj.name"
              placeholder="请输入菜单名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="权限值">
            <el-input
              style="width: 240px; margin-left: 14px"
              v-model="menuObj.code"
              placeholder="请输入权限值"
            ></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button type="primary" @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import {
  reqAddOrUpdate,
  reqDeleteMenu,
  reqGetMenu,
} from '../../../api/acl/menu/menuIndex'
import { ElMessage } from 'element-plus'
//用于收集添加菜单对话库的表单值
let menuObj = ref({
  code: '',
  level: 0,
  name: '',
  pid: 0,
  id: 0,
})
//用于收集所点击的table数据id
let menuId = ref<number>()
//对话框显示和隐藏
const dialog = ref(false)
//用于存储菜单数据，用于展示
let permission = ref([])
//组件挂载
onMounted(() => {
  getMenu()
})
//获取菜单
async function getMenu() {
  //请求接口
  let result = await reqGetMenu()
  /* console.log(result.data); */
  permission.value = result.data
}
//添加菜单回调
function addMenu(row: any) {
  //清除数据
  menuId.value = 0
  menuObj.value.code = ''
  menuObj.value.name = ''
  menuObj.value.level = 0
  menuObj.value.pid = 0
  menuObj.value.id = 0
  //打开对话框
  dialog.value = true
  /* console.log(row); */
  menuObj.value.level = row.level + 1
  menuObj.value.pid = row.id
}
//取消回调
function cancel() {
  dialog.value = false
}
//确定回调
async function confirm() {
  dialog.value = false
  //发送请求
  let result = await reqAddOrUpdate(menuObj.value)
  if (menuObj.value.id) {
    ElMessage({
      type: 'success',
      message: '修改成功',
    })
    getMenu()
    return
  }
  /*  console.log(result); */
  ElMessage({
    type: 'success',
    message: '添加成功',
  })
  getMenu()
}
//编辑回调
async function edit(row: any) {
  dialog.value = true
  menuId.value = row.id
  console.log(row)
  //赋值
  menuObj.value.name = row.name
  menuObj.value.code = row.code
  Object.assign(menuObj.value, row)
}
//删除回调
async function deleteMenu(row: any) {
  //请求接口
  let result = await reqDeleteMenu(row.id)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
    getMenu()
  } else {
    ElMessage({
      type: 'error',
      message: '操作失败',
    })
  }
}
</script>

<style scoped lang="scss"></style>
